<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        class="search"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="temp"
        @cancel="onCancel"
        @focus="show = true"
        autocomplete="off"
      />
    </form>
    <van-overlay :show="show" @click="isShow" :lock-scroll="true">
      <div class="wrapper">
        <div class="block">
          <div v-for="item in searchCars" :key="item.brand_id">
            <van-cell
              :label="`${item.level} --- ${item.agent_price}`"
              :title="`${item.series_name}`"
              @click="toDetail(item.series_id)"
            />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { Toast } from "vant";
import { debounce } from "@/tool/deboOrthro";
import { get } from "@/tool/get";
import { useRouter } from "vue-router";
export default {
  list: "input_",
  setup() {
    const state = reactive({
      searchCars: null,
    });
    const router = useRouter();
    const show = ref(false);
    const value = ref("");
    const onSearch = (val) => Toast(val);
    const onCancel = () => {
      value.value = "";
    };
    const onChange = () => {
      get("/data/searchCar", {
        params: value.value,
      }).then((res) => {
        state.searchCars = res.data.data;
      });
    };
    const isShow = () => {
      show.value = false;
      state.searchCars = null;
    };
    const temp = debounce(onChange, 1000);
    const toDetail = (item) => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      value.value = "";
      router.push({ path: `/carDetail/${item}` });
    };
    return {
      onSearch,
      onCancel,
      onChange,
      value,
      temp,
      show,
      isShow,
      toDetail,
      ...toRefs(state),
    };
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  z-index: 101;
  width: 100%;
  height: 100%;
}
.block {
  z-index: 101;
  width: 100%;
  height: 50%;
  overflow: scroll;
  padding-top: 30px;
}
.search {
  z-index: 102;
  box-sizing: border-box;
  position: fixed;
  left: 0px;
  height: 40px;
  line-height: 40px;
  width: 100%;
}
</style>